<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>智能收款</title>
<link th:href="@{/ksdH5/css/public/mui/mui.css}" rel="stylesheet"/>
<script th:src="@{/ksdH5/js/public/mui/mui.min.js}"></script>
<script th:src="@{/ksdH5/js/public/jquery.min.js}"></script>
<script th:src="@{/ksdH5/js/public/public.js}"></script>
<link th:href="@{/ksdH5/css/public/dizhi.css}" rel="stylesheet" />
<link th:href="@{/ksdH5/css/public/leftNav.css}" rel="stylesheet"/>
<link th:href="@{/ksdH5/css/smart/smart.css}" rel="stylesheet"/>
</head>
<body>
<!--头部-->
<div class="headerBox">
	<a href="javascript:void(0);" class="headerBox_left"><img th:src="@{/ksdH5/img/header_leftIcon.png}"></a>
	<!--关闭按钮-->
	<a href="javascript:void(0);" class="headerBox_leftClose"><img th:src="@{/ksdH5/img/login/closeBnt.png}"></a>
	<span>智能收款</span>
	<a th:href="${#httpServletRequest.getScheme()+'://'+#httpServletRequest.getServerName()+':'+#httpServletRequest.getServerPort()+#httpServletRequest.getContextPath()+'/h5/smart/list'}"class="headerBox_right">收款明细</a>
</div>
<div class="mui-content">
	<div class="smartTopBox">
		<div class="smartTopBox_xzBox smartTopBox_xfk">
			<span>消费卡</span>
			<em id="payCard">请选择消费卡</em>
			<img th:src="@{/ksdH5/img/makePlan_xxjt.png}" />
		</div>
		<div class="smartTopBox_xzBox smartTopBox_skk" onclick="receiveCardList()">
			<span>收款卡</span>
			<em id="receiveCard">请选择收款卡</em>
			<img th:src="@{/ksdH5/img/makePlan_xxjt.png}" />
		</div>
		<div class="smartTopBox_xzLjt"><img th:src="@{/ksdH5/img/znsk_bg.png}" /></div>
	</div>
	<div class="cardDetails_titleBox">
    	收款金额
    </div>
    <div class="smartContBox">
    	<div class="smartContBox_top">
    		<span>金额（元）</span>
    		<input id="payMoney" onkeyup="value=zhzs(this.value)" type="tel"/>
    	</div>
    	<div class="smartContBox_bottom">
			预计消费<span id="prePay">0.00</span>元<em>费率：<span id="smart_rate"></span></em>    		
    	</div>
    </div>
    <div class="smartContBox" style="margin-top: 0;">
     <div class="smartContBox_top">
	     <span>选择城市</span>
	     <input type="text" class="select-value" value="请选择您的城市" readonly="readonly" />
     </div>
    </div>
    <button class="smartContBnt" onclick="showPWD()">确认提交</button>
</div>
<!--左侧导航-->
<!--左侧导航-->
<!-- 引入导航页面 -->
<!-- ecr/html/includeNav:是子页面的文件路径 ；myNav：是子页面中被引用代码块的名称
（如th:fragment="myNav"） -->
<div th:replace="h5/ksdH5IncludeNav :: ksdH5Nav"  ></div>
<div class="huiseBox"></div>
<!--消费卡弹窗-->
<div class="makePlan_xkBg" style="display: none;"></div>
<div class="smartTopBox_xfkBox" style="display: none;">
	<div class="makePlan_selectedCardBox_topBox">
		<span>选择消费卡</span>
		<a href="javascript:void(0);" class="makePlan_selectedCardBox_closeBnt"><img th:src="@{/ksdH5/img/login/closeBnt.png}" /></a>
	</div>
	<div class="makePlan_selectedCardBox_listBox">
	
	</div>
</div>
<!--收款卡弹窗-->
<div class="smartTopBox_skkBox" style="display: none;">
	<div class="makePlan_selectedCardBox_topBox">
		<span>请选择收款卡</span>
		<a href="javascript:void(0);"  class="makePlan_selectedCardBox_closeBnt"><img th:src="@{/ksdH5/img/login/closeBnt.png}" /></a>
	</div>
	<div class="makePlan_selectedCardBox_listBox" id="receiveCardList">
		
	</div>
</div>


<!-- 开通通道提示框-->
<div class="selectChannelBox_tishiBg"></div>
<div class="selectChannelBox_tishiBox">
	<div class="selectChannelBox_tishiBox_top">
		<a href="javascript:void(0);" class="selectChannelBox_tishiBox_top_close"><img th:src="@{/ksdH5/img/selectChannel_close.png}" /></a>
	</div>
	<div class="selectChannelBox_tishiBox_middle">
		<div class="s_t_m_top"><img th:src="@{/ksdH5/img/yinlianLogo.png}" />银联绑卡</div>
		<div class="s_t_m_middle">
			<span>信用卡：</span>
			<em id="open_acq_bankcard"></em>
		</div>
		<div class="s_t_m_middle">
			<span>手机号：</span>
			<em id="open_acq_phone"></em>
		</div>
		<div class="s_t_m_bottom">
			<strong>验证码：</strong>
			<input type="tel" id="open_acq_code" placeholder="输入验证码" />
			<a href="javascript:void(0);" class="T-getCode" onclick="sendOpenAcqSMS()">获取验证码</a>
			<span class="T-getCode1"></span>
		</div>
	</div>
	<button class="selectChannelBox_tishiBox_bnt" onclick="submitAcq()">确定</button>
</div>

<!--输入交易密码框-->
<div class="tradePassword_tishiBg" ></div>
<div class="tradePassword_tishiBox" >
	<div class="selectChannelBox_tishiBox_top">
		<a href="javascript:void(0);" class="tradePassword_tishiBox_close"><img th:src="@{/ksdH5/img//selectChannel_close.png}" /></a>
	</div>
	<div class="selectChannelBox_tishiBox_middle">
		<div class="s_t_m_top">交易密码</div>
		<div class="s_t_m_bottom tradePassword_bottom">
			<strong>交易密码：</strong>
			<input id="tranPassword" type="password" placeholder="输入交易密码" />
		</div>
	</div>
	<button class="selectChannelBox_tishiBox_bnt"  onclick="checkPassword()">确定</button>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
//获得项目根路径
var ctx = [[@{/}]];
</script>

<script type="text/javascript">
mui.init({
	swipeBack:true
})
/*打开新的下载页面窗口*/
$(document).on('click','#uploadBnt',function(){
	window.open("https://fir.im/Katimes");
})
/*关闭交易密码输入框*/
$(document).on('click','.tradePassword_tishiBox_close',function(){
	$('.tradePassword_tishiBg').hide();
    $('.tradePassword_tishiBox').hide();
});

/*左边导航*/
$(document).on('click','.headerBox_left',function(){
	$('.huiseBox').show();
	$('.leftNavContBox').show();
	$('.headerBox_leftClose').show();
	$('.headerBox_left').hide();
	$("body").attr("style","left:5.48rem;position:fixed;"); 
	$(".headerBox").css('left','5.48rem');   
});
$(document).on('click','.headerBox_leftClose',function(){
	$('.huiseBox').hide();
	$('.leftNavContBox').hide();
	$('.headerBox_leftClose').hide();
	$('.headerBox_left').show();
	$("body").removeAttr("style");   
	$("body").removeAttr("style"); 
	$(".headerBox").css('left','0');   
});
/*选择消费卡*/
$(document).on('click','.smartTopBox_xfk',function(){
	$('.makePlan_xkBg').show();
	$('.smartTopBox_xfkBox').show();
});
 /*选择收款卡*/
/*$(document).on('click','.smartTopBox_skk',function(){
	
}); */
/*关闭获取验证码页面*/
$(document).on('click','.selectChannelBox_tishiBox_top_close',function(){
	$('.selectChannelBox_tishiBg').hide();
    $('.selectChannelBox_tishiBox').hide();
});
$(document).on('click','.makePlan_selectedCardBox_closeBnt',function(){
	$('.makePlan_xkBg').hide();
	$('.smartTopBox_xfkBox').hide();
	$('.smartTopBox_skkBox').hide();
});
var currentPayCard;//当前选中的消费卡号
var currentReceiveCard//当前选中的收款卡号
var result;//定义卡列表返回结果集
var rate;//当前费率
var jsonCards;//信用卡列表
var open_acqcode;//需要开通的通道号
var currentCardid;//当前卡id
$(function(){
	var validCode=true;
    $(".T-getCode").click (function  () {
        var time=60;
        var $code=$(this);
        if (validCode) {
            validCode=false;
            var t=setInterval(function  () {
                time--;
                $(".T-getCode").hide();
                $(".T-getCode1").show();
                $(".T-getCode1").html(time+"秒");
                if (time==0) {
                    clearInterval(t);
                    $(".T-getCode").html("重新获取");
		            $(".T-getCode1").hide();
                	$(".T-getCode").show();
                    validCode=true;
                }
            },1000)
        }
    })
		//指定第3个菜单样式选中
   		$(".leftNavContBox_contBox li").eq(2).find("a").addClass('leftNavContBox_contBox_bnt_active');
   		//查询用户信息
   		 $.ajax({
				url : ctx+ "h5/merInfo",
				type : "POST",
				success : function(re) {
				if (re.status == "SUCCESS") {
					var merchant = re.merchant;
					$("#nav_mer_name").text(merchant.merchantCnName);
					$("#nav_mer_phone").text(merchant.phone);
					var level = merchant.level;
					if(level=="1"){
						$("#nav_mer_level").text("免费用户");
					} else if(level=="2"){
						$("#nav_mer_level").text("经理（未激活）");
					} else if(level=="3"){
						$("#nav_mer_level").text("经理");
					}
					//指定头像
					var headImg = re.headImg;
					if(headImg != ""&& headImg !=null){
						$("#head_img").attr('src',headImg);
					}
				} else {
					
				}
			}
		});
   
    
    
	var str="";
	 $.ajax({
			url : ctx+ "h5/smart/cardList",
			type : "GET",
			success : function(re) {
				result = re;
				if(re.status == "out"){
					//跳转登陆页面
					location.href = ctx + 'h5/login';
				}else if (re.status == "SUCCESS") {
					var obj = re.obj;
					$("#smart_rate").text(obj.rate);
					rate = obj.rate;
					jsonCards = JSON.parse(obj.cardList); 
					for(var i=0;i<jsonCards.length;i++){
						str += '<a href="javascript:void(0);" onclick="chooseCard(\''+jsonCards[i].short_cn_name+'\',\''+jsonCards[i].BANK_ACCOUNT+'\',\''+jsonCards[i].id+'\',\''+jsonCards[i].support+'\')">';
						str += "<img class='makePlan_selectedCardBox_listBox_cardBG' src='/ksdH5/img/zwt/yhBg.png'/>";
						str += "<div class='makePlan_selectedCardBox_listBox_contBox'>";
						str += "<div class='cardManagementBox_left'>";
						str += "<img src='"+jsonCards[i].cardImg+"'/>";
						str += "</div>";
						str += "<div class='cardManagementBox_middle'>";
						str += "<div class='cardManagementBox_middle_top'>";
						str += "<span>"+jsonCards[i].short_cn_name+"</span>";
						if(jsonCards[i].support=="0"){
							str +="<em>暂不支持</em>";
						}
						str += "</div>";
						str += "<div class='cardManagementBox_middle_bottom'>"+jsonCards[i].BANK_ACCOUNT.substr(0,4)+"&nbsp;&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;&nbsp;"+jsonCards[i].BANK_ACCOUNT.substr(jsonCards[i].BANK_ACCOUNT.length-4)+"</div>";
						str += "</div>";
						str += "</div>";
						str += "</a>";
					}
					$(".makePlan_selectedCardBox_listBox").html(str); 
				} else {
					
				}
			}
		});
	//监听金额输入框
	 $("#payMoney").bind('input propertychange',function(){
			var payMoney = $.trim($("#payMoney").val());
			if(payMoney=="" || parseFloat(payMoney)==0){
				$("#prePay").text(0);
				return;
			}
			if(parseFloat(payMoney)>20000){
		 		mui.toast("金额不能超过20000",{ duration:'long'});
		 		return;
		 	}
			var split =  rate.split("+");
			var rateNum = split[0].substr(0,4);
			var rateMoney = payMoney*rateNum/100;
			var rateMoneyStr = rateMoney.toFixed(2);
			rateMoneyStr =   parseFloat(payMoney)+parseFloat(rateMoneyStr)+parseInt(split[1]);
			$("#prePay").text(rateMoneyStr); //预支付金额
			
		})
})

//选择消费卡
function chooseCard(bankName,cardNo,cardId,support){
	if(support=="0"){//暂不支持
		return;
	}
	$(".makePlan_xkBg").hide();
	$(".smartTopBox_xfkBox").hide();
	$("#payCard").text(bankName+" "+cardNo);
	currentPayCard = cardNo;
	currentCardid = cardId;
}
//选择首款卡
function chooseReceiveCard (bankName,cardNo,support){
	if(support=="0"){//暂不支持
		return;
	}
	$('.makePlan_xkBg').hide();
	$('.smartTopBox_skkBox').hide();
	$("#receiveCard").text(bankName+" "+cardNo);
	currentReceiveCard = cardNo;
}


//收款卡列表 
function receiveCardList(){
	if(currentPayCard==null || currentPayCard.length==0){
		mui.toast("请先选择消费卡",{ duration:'long'});
		return;
	}
	var str="";
	for(var i=0;i<jsonCards.length;i++){
	 if(jsonCards[i].BANK_ACCOUNT==currentPayCard){
			continue;
		} 
		str += '<a href="javascript:void(0);" onclick="chooseReceiveCard(\''+jsonCards[i].short_cn_name+'\',\''+jsonCards[i].BANK_ACCOUNT+'\',\''+jsonCards[i].support+'\')">';
		str += "<img class='makePlan_selectedCardBox_listBox_cardBG' src='/ksdH5/img/zwt/yhBg.png'/>";
		str += "<div class='makePlan_selectedCardBox_listBox_contBox'>";
		str += "<div class='cardManagementBox_left'>";
		str += "<img src='"+jsonCards[i].cardImg+"'/>";
		str += "</div>";
		str += "<div class='cardManagementBox_middle'>";
		str += "<div class='cardManagementBox_middle_top'>";
		str += "<span>"+jsonCards[i].short_cn_name+"</span>";
		if(jsonCards[i].support=="0"){
			str +="<em>暂不支持</em>";
		}
		str += "</div>";
		str += "<div class='cardManagementBox_middle_bottom'>"+jsonCards[i].BANK_ACCOUNT.substr(0,4)+"&nbsp;&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;&nbsp;"+jsonCards[i].BANK_ACCOUNT.substr(jsonCards[i].BANK_ACCOUNT.length-4)+"</div>";
		str += "</div>";
		str += "</div>";
		str += "</a>";
	}
	$("#receiveCardList").html(str);
	$('.makePlan_xkBg').show();
	$('.smartTopBox_skkBox').show();
}

//显示交易密码输入框
function showPWD(){
	if(currentPayCard==currentReceiveCard){
		mui.toast("消费卡和收款卡不能是同一张卡，请重新选择卡片",{ duration:'long'});
		return;
	}
	if(currentPayCard==null || currentPayCard.length==0){
		mui.toast("请先选择消费卡",{ duration:'long'});
		return;
	}
	if(currentReceiveCard==null || currentReceiveCard.length==0){
		mui.toast("请先选择收款卡",{ duration:'long'});
		return;
	}
	var payMoney = $.trim($("#payMoney").val());
	if(payMoney=="" || parseFloat(payMoney)==0){
		mui.toast("请输入正确的收款金额",{ duration:'long'});
		return;
	}
	if(parseFloat(payMoney)>20000){
 		mui.toast("金额不能超过20000",{ duration:'long'});
 		return;
 	}
	var cityName = $.trim($(".select-value").val());
	if("请选择您的城市"==cityName){
		mui.toast("请选择您的城市",{ duration:'long'});
		return;
	}
	//弹出交易密码验证提示框
	$(".tradePassword_tishiBox").show();
	$(".tradePassword_tishiBg").show();
	
}	

//验证交易密码提交智能收款
function checkPassword(){
	var password =  $.trim($("#tranPassword").val());
	var reg=/^[1-9]+\d*$/;
	if((!reg.test(password)) || (password.length!=6)){
		 mui.toast("请填写正确的六位数字交易密码",{ duration:'long'});
		 return;
	}
	$.ajax({
		type:"POST",
		url:ctx+"h5/smart/checkTransPW",
		async:true,
		dataType:"json",
		data:{
			"transPW":password
		},
		success:function(re){
			if(re.status == "out"){
				//跳转登陆页面
				location.href = ctx + 'h5/login';
			}	
			var obj = re.obj;
			if(re.status=="SUCCESS"){//交易密码正确
				//关闭交易密码验证提示框
				$(".tradePassword_tishiBox").hide();
				$(".tradePassword_tishiBg").hide();
				//提交智能收款
				submitSmart();
			}else {
				mui.toast(re.msg,{ duration:'long'});
			}
		},
		error:function(){
			mui.toast("服务器异常",{ duration:'long'});
		}
	}); 
	
	
}


//提交智能收款
function submitSmart(){
	if(currentPayCard==currentReceiveCard){
		mui.toast("消费卡和收款卡不能是同一张卡，请重新选择卡片",{ duration:'long'});
		return;
	}
	if(currentPayCard==null || currentPayCard.length==0){
		mui.toast("请先选择消费卡",{ duration:'long'});
		return;
	}
	if(currentReceiveCard==null || currentReceiveCard.length==0){
		mui.toast("请先选择收款卡",{ duration:'long'});
		return;
	}
	var payMoney = $.trim($("#payMoney").val());
	if(payMoney=="" || parseFloat(payMoney)==0){
		mui.toast("请输入正确的收款金额",{ duration:'long'});
		return;
	}
	if(parseFloat(payMoney)>20000){
 		mui.toast("金额不能超过20000",{ duration:'long'});
 		return;
 	}
	var cityName = $.trim($(".select-value").val());
	if("请选择城市"==cityName){
		mui.toast("请选择城市",{ duration:'long'});
		return;
	}
	 $.ajax({
			url : ctx+ "h5/smart/submitSmart",
			type : "POST",
			data:{
				"from_bankcard":currentPayCard,
				"to_bankcard":currentReceiveCard,
				"collection_money":payMoney,
				"collection_addr":cityName
			},
			success : function(re) {
				result = re;
				if(re.status == "out"){
					//跳转登陆页面
					location.href = ctx + 'h5/login';
				}else if (re.status == "SUCCESS") {
					var obj = re.obj;
					if(obj.kt_status=="0"){ //需开通通道
						if(obj.kt_type=="sms"){
							//弹出开通通道提示框
							$(".selectChannelBox_tishiBg").show();
							$(".selectChannelBox_tishiBox").show();
							open_acqcode = obj.kt_acq;
						  $("#open_acq_phone").text(obj.kt_phone.substr(0,4)+" *** "+obj.kt_phone.substr(7));
				           var str="";
				            for(var i =0;i<currentPayCard.length-8;i++){
				            	str +="*";
				            }
				            $("#open_acq_bankcard").text(currentPayCard.substr(0,4)+" "+str+" "+currentPayCard.substr(currentPayCard.length-4));
						} else if(obj.kt_url.length>5){
							//url开通
							window.location.href=obj.kt_url;
							
						}
					} else {
						mui.toast(re.msg,{ duration:'long'});
						//跳转到收款明细
						 setTimeout(function(){
								window.location.href= ctx+ "h5/smart/list";
							},3000) 
					}
				
				} else {
					mui.toast(re.msg,{ duration:'long'});
				}
			}
		});
}


var open_acq_result;//预开通返回结果
//发送开通通道短信验证码
function sendOpenAcqSMS(){
	$.ajax({
		type:"POST",
		url:ctx+"h5/quick/prebind",
		async:true,
		dataType:"json",
		data:{
			"cardid":currentCardid,
			"acqcode":open_acqcode
		},
		success:function(re){
			if(re.status == "out"){
				//跳转登陆页面
				location.href = ctx + 'h5/login';
			}	
			var obj = re.obj;
			if(re.status=="SUCCESS"){//发送成功
				open_acq_result = obj.result;
				mui.toast( re.msg,{ duration:'long'});
			}else {
				mui.toast( re.msg,{ duration:'long'});
			}
		},
		error:function(){
			mui.toast("服务器异常",{ duration:'long'});
		}
	});
	
}
//提交开通通道
function submitAcq(){
	var smscode = $.trim($("#open_acq_code").val());//短信验证码
	if(smscode.length<4){
		mui.toast("请输入正确的验证码",{ duration:'long'});
	}
	 $.ajax({
			url : ctx+ "h5/plan/submitAcq",
			type : "POST",
			data:{
				"smscode":smscode,
				"result":open_acq_result,
				"acqcode":open_acqcode,
				"cardid":currentCardid
			},
			success : function(re) {
			if(re.status == "out"){
				//跳转登陆页面
				location.href = ctx + 'h5/login';
			}	
			if (re.status == "SUCCESS") {
				//开通成功
				iskt = true;
				$(".selectChannelBox_tishiBg").hide();
				$(".selectChannelBox_tishiBox").hide();
				mui.toast(re.msg,{ duration:'long'});
			} else {
				mui.toast(re.msg,{ duration:'long'});
			}
		}
	}); 
}

//转化正整数
function zhzs(value){
    value = value.replace(/[^\d]/g,'');
    if(''!=value){
        value = parseInt(value);
    }
    return value;

}

</script>
<script th:src="@{/ksdH5/js/public/dizhi.js}"></script>
</html>
